{% extends 'teacher-base.html' %}
{% load staticfiles %}
{% block title %}
{% endblock %}
{% block head %}
         <link rel="stylesheet" href="{% static 'js/plugins/datatables/css/jquery.dataTables.css' %}">
         <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
         <script src="{% static 'js/bootstrap.min.js' %}"></script>
        <script src="{% static 'js/plugins/datatables/js/jquery.dataTables.js' %}"></script>


        <script type="text/javascript">


  $(function () {
    var table = $('#course').DataTable({

      "pagingType": "full_numbers",
      "bSort": true,
      "language": {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
      },
      "columnDefs": [{
        "searchable": false,
        "orderable": true,
        "targets": 0
      }],
      "order": [[1, 'asc']]
    });
    table.on('order.dt search.dt', function() {
      table.column(0, {
        search: 'applied',
        order: 'applied'
      }).nodes().each(function(cell, i) {
        cell.innerHTML = i + 1;
      });
    }).draw();

    $('#course tbody').on('click', 'tr', function () {
      if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
      }
      else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
      }
    });




    $("#btn_add").click(function(){
      $("#addBook").modal()
    });

    $('#btn_edit').click(function () {
      if (table.rows('.selected').data().length) {
        $("#editBookInfo").modal()
        var rowData = table.rows('.selected').data()[0];

    $("#editBookModal").find("input[name='couid']").val(rowData[8]);
    $("#editBookModal").find("input[name='name']").val(rowData[1]);
    $("#editBookModal").find("input[name='detail']").val(rowData[2]);
    $("#editBookModal").find("input[name='degree']").val(rowData[3]);
    $("#editBookModal").find("input[name='heat']").val(rowData[4]);
    $("#editBookModal").find("input[name='learn_times']").val(rowData[5]);
    $("#editBookModal").find("input[name='is_m']").val(rowData[6]);
    $("#editBookModal").find("input[name='image']").val(rowData[7]);


      } else {
        alert('请选择项目');
      }
    });



    $("#cancelEdit").click(function() {

      $("#editBookModal").find('input').val('')
    })

    $('#btn_delete').click(function () {
      if (table.rows('.selected').data().length) {
        $("#deleteBook").modal()
      } else {
        alert('请选择项目');
      }
    });

    $('#delete').click(function () {
        var rowData = table.rows('.selected').data()[0];
           $.ajax({
                    type: "post",
                    dataType:"json",
                    url: "/teacher/coudelete",
                    async: false,
                    data: {
                        "_id": rowData[8],

                    },
                    beforeSend:function(xhr, settings){
                   xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success:function(req){
                        console.log(req)
                        if(req=='ok'){
                            alert('ok')
                            location.href = "{% url 'teacher:relcou' %}";
                            location.reload() ;
                        }
                      },


                });
    });

  })

        </script>
    <style>
    {#.content {#}
    {#  margin: 0px auto;#}
    {#  border:1px solid #ccc;#}
    {#}#}

    .operation {
      margin: 10px;
    }

    .operation>button {
      margin: 10px;
    }

    #books_length {
      float: left;
      margin-left: 20px;
    }

    #books_filter {
      float: right;
      margin-right: 20px;
    }

    #books {
      margin: 5px;
    }

    .center-block {
      display: block;
      width: 21%;
      margin: auto;
    }
    table.dataTable thead th, table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #ff0000;
}
  </style>
{% endblock %}

<html>
{% block custom_bread %}
    <section>      <div class="wp">
            <ul  class="crumbs">
                <li><a href="{% url 'index' %}">首页</a>></li>
                <li><a href="{% url 'teacher:teacher_info' %}">个人中心</a>></li>
                <li>教程管理</li>
            </ul>
        </div>

    </section>
{% endblock %}
{% block right_content %}
{% load static %}
<div class="right">
  <section class="content">
    <div class="btn-group operation">
      <button id="btn_add" type="button" class="btn bg-primary">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
      </button>
      <button id="btn_edit" type="button" class="btn bg-info">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
      </button>
      <button id="btn_delete" type="button" class="btn btn-success">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
      </button>
    </div>
    <div class="modal fade" id="addBook" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">添加课程</h4>
          </div>


  <form autocomplete="off" method="post" action="{% url 'teacher:relcou' %}" enctype="multipart/form-data">
                {% csrf_token %}
        <div class="modal-body">
            <div class="form-horizontal">

              <div class="form-group">
                <label for="name" class="col-sm-2 control-label">课程名:*</label>
                <div class="col-sm-10">
                  <input class="form-control" id="name" name= "name" type="text" value="">
                </div>
              </div>
              <div class="form-group">
                <label for="detail" class="col-sm-2 control-label">课程详情:*</label>
                <div class="col-sm-10">
                  <input class="form-control" id="detail" name="detail" type="text">
                </div>
              </div>
              <div class="form-group">
                <label for="degree" class="col-sm-2 control-label">难度:*</label>
                <div class="col-sm-10">
                  	<input type="radio" id="jc" name="degree" value="jc" checked="checked">零基础
							<input type="radio" name="degree" value="cj" >初级
                            <input type="radio" name="degree" value="zj" >中级
                            <input type="radio" name="degree" value="gj" >高级
                </div>
              </div>
              <div class="form-group">
                <label for="heat" class="col-sm-2 control-label">热量:*</label>
                <div class="col-sm-10">
                  <input class="form-control" id="heat" name="heat" type="text">
                </div>
              </div>
              <div class="form-group">
                <label for="learn_times" class="col-sm-2 control-label">时长:*</label>
                <div class="col-sm-10">
                  <input class="form-control" id="learn_times"  name="learn_times" type="text">
                </div>
              </div>
              <div class="form-group">
                <label for="is_m" class="col-sm-2 control-label">是否会员:*</label>
                <div class="col-sm-10">
                 <input type="radio"  id ='t' name="is_m" value="1">是
						<input type="radio" id ='f' name="is_m" value="0"  checked="checked">否
                </div>
              </div>
              <div class="form-group">

        <label for="image" class="col-sm-2 control-label">封面图:*</label>
        <div class="col-sm-10">

          <input class="form-control"  id="image" type="file" name="image"  class="js-img-up" value="" target='frameFile'>
        </div>

      </div>
                <button id="cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button id="addBooksInfo" type="submit" class="btn btn-success">保存</button>

            </div></div></form>
          </div>


        </div>
      </div>


    <div class="modal fade" id="editBookInfo" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button tyHttpResponsepe="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">修改课程内容</h4>
            </div>
               <form autocomplete="off" method="post" action="{% url 'teacher:upcou' %}" enctype="multipart/form-data">
                {% csrf_token %}
            <div id="editBookModal" class="modal-body">
              <div class="form-horizontal">

                <div class="form-group">
                  <label for="name" class="col-sm-2 control-label">课程名:*</label>
                  <div class="col-sm-10">
                    <input class="form-control" id="name"  name="name" type="text">
                  </div>
                </div>
                <div class="form-group">
                  <label for="detail" class="col-sm-2 control-label">课程详情:*</label>
                  <div class="col-sm-10">
                    <input class="form-control" id="detail" name="detail" type="text">
                  </div>
                </div>
              <div class="form-group">
                <label for="degree" class="col-sm-2 control-label">难度:*</label>
                <div class="col-sm-10">
                  	<input type="radio" id="jc" name="degree" value="jc" checked="checked">零基础
							<input type="radio" name="degree" value="cj" >初级
                            <input type="radio" name="degree" value="zj" >中级
                            <input type="radio" name="degree" value="gj" >高级
                </div>
              </div>
              <div class="form-group">
                <label for="heat" class="col-sm-2 control-label">热量:*</label>
                <div class="col-sm-10">
                  <input class="form-control" id="heat" name="heat" type="text">
                </div>
              </div>
              <div class="form-group">
                <label for="learn_times" class="col-sm-2 control-label">时长:*</label>
                <div class="col-sm-10">
                  <input class="form-control" id="learn_times"  name="learn_times" type="text">
                </div>
              </div>
              <div class="form-group">
                <label for="is_m" class="col-sm-2 control-label">是否会员:*</label>
                <div class="col-sm-10">
                 <input type="radio"  id ='t' name="is_m" value="1">是
						<input type="radio" id ='f' name="is_m" value="0"  checked="checked">否
                </div>
              </div>
                  <div><input  id = "couid" name="couid"  type="hidden"></div>
              <div class="form-group">

        <label for="image" class="col-sm-2 control-label">封面图:*</label>
        <div class="col-sm-10">

          <input class="form-control"  id="image" type="file" name="image"  class="js-img-up" value="" target='frameFile'>
        </div>

              </div>
              </div>
            </div>        <button id="cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                      <button id="saveEdit" type="submit" class="btn btn-success" >保存</button></form>

          </div>
        </div>
      </div>


    <div class="modal fade" id="deleteBook" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">确认要删除吗？</h4>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button id="delete" type="button" class="btn btn-danger" data-dismiss="modal">删除</button>
          </div>
        </div>
      </div>
    </div>

    <table id="course">
      <thead>
        <tr>
            <th></th>
          <th>课程名</th>
          <th>课程详情</th>
          <th>难度</th>
          <th>热量</th>
          <th>时长</th>
          <th>是否会员</th>
            <th>封面图</th><th style="display: none"></th>
        </tr>
      </thead>

      <tbody id="b_{{ cou_id }}"> {% for cou in all_course %}
            <tr>
            <td></td>
      <td>{{ cou.name }}</td>
      <td>{{ cou.detail }}</td>
      <td>{{ cou.degree }}</td>
      <td>{{ cou.heat }}</td>
      <td>{{ cou.learn_times }}</td>
      <td>{{ cou.is_member }}</td>
                <td>{{ cou.image }}</td>
                <td style="display: none">{{ cou.id }}</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </section></div>



</html>{% endblock %}